import React from 'react'
import {withRouter,} from 'react-router-dom'
import {connect,} from 'react-redux'
import {List} from "antd-mobile";
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import LocalStorageService from "../../utils/LocalStorageService";
const Item = List.Item

class FeedbackList extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            p: 0,
            select: false,
            feedback: {
                Contact: "",
                Createt: "",
                Id: -1,
                Img: "",
                Reply: "",
                Style: 4,
                Title: "",
                Txt: "",
                Uid: "",
            },
        }
    }

    componentDidMount() {
        const params = {
            p: this.state.p,
            uid: LocalStorageService.get('userid')
        }
        this.props.doFetchFeedbackList(params)
    }

    render() {

        const list = this.props.user.feedbackList
        const listTemplate = <List>
            {list.map(item => {
                const {
                    Title,
                    Reply,
                } = item
                return <Item
                    key={item.Id}
                    extra={Reply ? '已回复' : ''}
                    onClick={() => {
                        this.setState({
                            select: true,
                            feedback: item,
                        })
                    }}
                >
                    {Title}
                </Item>
            })}
        </List>

        const selectFeedback = this.state.feedback
        const title = selectFeedback.Title
        // Contact: "",
        // Createt: "",
        // Id: -1,
        // Img: "",
        // Reply: "",
        // Style: 4,
        // Title: "",
        // Txt: "",
        // Uid: "",
        const img = selectFeedback.Img
        const reply = selectFeedback.Reply

        const feedbackT = <div
            style={{
                position: 'fixed',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                background: '#F8F8F8',
                zIndex: 9,
            }}
        >
            <GoBackLayout
                title='记录详情'
                onLeftClick={() => {
                    this.setState({
                        select: false,
                    })
                }}
            >
                <div
                    style={{
                        background: '#fff',
                        marginTop: '1px',
                        padding: '16px',
                    }}
                >
                    <p
                        style={{
                            fontSize: '16px',
                            color: 'rgba(51,51,51,1)',
                            marginBottom: '20px',
                        }}
                    >{title}</p>
                    <img src={img} alt='' style={{width: '100%', marginBottom: '16px',}}/>
                    <div
                        style={{
                            background: 'rgba(248,248,248,1)',
                            minHeight: '80px',
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}
                    >
                        <span>
                            {reply === ''
                                ? '正在处理中…'
                                : reply
                            }
                        </span>
                    </div>
                </div>

            </GoBackLayout>
        </div>

        return <>
            {this.state.select ? feedbackT : null}
            <GoBackLayout
                title='反馈记录'
                history={this.props.history}
            >
                {listTemplate}
            </GoBackLayout>
        </>
    }
}

const mapState = (state) => ({
    user: state.user,
})

const mapDispatch = (dispatch) => ({
    doFetchFeedbackList: (payload) => dispatch.user.doFetchFeedbackList(payload),
})

export default connect(mapState, mapDispatch)(withRouter(FeedbackList))
